import { useState } from 'react';

const CourseCard = ({ course, onViewWorks }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="block group cursor-pointer"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={() => onViewWorks(course)}
    >
      <div className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 h-full flex flex-col">
        {/* 课程封面 */}
        <div className="relative overflow-hidden h-48">
          <img
            src={course.coverImage || 'https://via.placeholder.com/400x300?text=课程封面'}
            alt={course.name}
            className={`w-full h-full object-cover transition-transform duration-500 ${isHovered ? 'scale-110' : 'scale-100'}`}
          />
        </div>

        {/* 课程信息 */}
        <div className="p-4 flex-grow flex flex-col">
          <div className="flex justify-between items-start mb-2">
            <h3 className="font-semibold text-lg line-clamp-1 flex-1">{course.name}</h3>
            <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full ml-2 whitespace-nowrap">
              {course.worksCount || 0} 个作品
            </span>
          </div>

          <p className="text-gray-600 dark:text-gray-400 text-sm mb-2">任课教师: {course.teacher}</p>
          <p className="text-gray-500 dark:text-gray-500 text-sm flex-grow line-clamp-3 mb-3">{course.description}</p>

          {/* 管理员信息 */}
          {course.adminUsername && (
            <div className="text-xs text-gray-400 dark:text-gray-500">
              管理员: {course.adminUsername}
            </div>
          )}

          {/* 创建时间 */}
          {course.createdAt && (
            <div className="mt-2 pt-2 border-t border-gray-100 dark:border-gray-700">
              <p className="text-xs text-gray-400 dark:text-gray-500">
                {new Date(course.createdAt).toLocaleDateString('zh-CN')}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default CourseCard;